<template>
	<view class="menu-box left clearfix">
		
		<view class="menu-breadcrumb left clearfix">
			<uni-breadcrumb separator="/" style="width:300px;float:left;">
			  <uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
			    {{route.name}}
			  </uni-breadcrumb-item>
			</uni-breadcrumb>
			
		</view>
		
		<!--内容开始-->
		<view class="add-box left clearfix" style="width:700px;margin-left:100px;margin-top:50px;">
			
				<view class="example">
					<!-- 基础用法，不包含校验规则 -->
					<uni-forms ref="form" :modelValue="formData" label-width="50">
						<uni-forms-item label="姓名" required name="name">
							<uni-easyinput v-model="formData.name" placeholder="请输入姓名" />
						</uni-forms-item>
						
						<uni-forms-item label="手机号码" required name="mobile">
							<uni-easyinput v-model="formData.mobile" placeholder="请输入手机号码用作登录" />
						</uni-forms-item>
						
						
						
						<uni-forms-item label="权限" required>
							 <uni-data-select
							      v-model="formData.role"
							      :localdata="roleGroup"
							    ></uni-data-select>
						</uni-forms-item>
						
						
						
						<uni-forms-item label="" style="margin-top:50px;text-align: center;">
							
							<view class="form-quxiao-submit right" @click="navigatorToList()">
								取消
							</view>
							
							<view class="form-submit right" @click="submitForm">
								保存
							</view>
							
						</uni-forms-item>
						
					</uni-forms>
				</view>
		</view>
		<!--内容结束-->
		
	</view>
</template>
<style scoped>
	.role-item-title{width:100%;line-height:20px;margin-top:15px;margin-bottom:15px;}
	.role-item{width:100%;min-height:70px;}
	.role-box label{margin-left:10px;margin-right:10px;}
	.role-box{width:100%;min-height:200px;}
	.add-null-image-box{width:100%;height:300px;line-height:300px;text-align: center;font-size:14px;color:#999;}
	.add-image-box{width:230px;height:150px;border:1px solid #eee;border-radius: 5px;margin:4px;cursor:pointer;overflow: hidden;}
	.add-select-content{width:96%;margin-left:2%;margin-top:20px;height:420px;overflow: auto;}
	.add-select-title label{float:right;margin-right:10px;cursor:pointer;}
	.add-select-title{width:calc(100% - 10px);padding-left:10px;line-height:35px;font-size:13px;color:#555;}
	.add-select-box{width:1000px;height:500px;background:#fff;border-radius: 10px;}
	.poster-box{width:300px;height:200px;border:1px solid #eee;border-radius: 5px;background:#f8f8f8;line-height:180px;text-align: center;}
	.form-quxiao-submit{width:100px;line-height:40px;height:40px;color:#666;border-radius: 5px;text-align: center;border:1px solid #ccc;margin-right:20px;cursor:pointer;}
	.form-submit{width:100px;line-height:40px;height:40px;background:#2979ff;color:#fff;border-radius: 5px;text-align: center;margin-right:20px;cursor:pointer;}
	.example {
			padding: 15px;
			background-color: #fff;
		}
	
		.segmented-control {
			margin-bottom: 15px;
		}
	
		.button-group {
			margin-top: 15px;
			display: flex;
			justify-content: space-around;
		}
	
		.form-item {
			display: flex;
			align-items: center;
		}
	
		.button {
			display: flex;
			align-items: center;
			height: 35px;
			margin-left: 10px;
		}
	.add-box{width:96%;margin-left:2%;margin-top:30px;min-height:400px;}
</style>

<script>
	var db = uniCloud.database();
	var systemMenu = uniCloud.importObject('systemmenu',{customUI:true});
	var aliyun = uniCloud.importObject('aliyun',{customUI:true});
	import common from '/static/js/common.js';
	export default {
		name:"userinfo-add",
		data() {
			return {
				roleGroup:[],
				formData:{
					mobile:'',
					name:'',
					role:''
				},
				routes: [
				        {
				          to: "/A",
				          name: "权限管理",
				        },
				        {
				          to: "/B",
				          name: "新增成员",
				        },
				      ]
			};
		},
		props:{
			id:{
				type:String
			},
			userinfo:{
				type:Object,
				title:'用户信息'
			}
		},
		mounted() {
				var that = this;
				that.getRole();
				//根据id查询出结果
				setTimeout(function(){
					if(that.id.length > 5){
						that.getDataById(that.id);
					}
				},500);
				
			},
		methods:{
			//获取权限列表
			getRole(){
				var db = uniCloud.database();
				db.collection('userinfo_group').field('_id as value,title as text').get().then(res=>{
					this.roleGroup = res.result.data;
				});
			},
			//跳转列表页
			navigatorToList(){
				uni.navigateTo({
					url:'/pages/index/index?page=admin-list'
				})
			},
			
			getDataById(id){
				db.collection('userinfo').where({_id:id}).get({getOne:true}).then(res=>{
					if(res.result.data){
						this.formData = res.result.data;
						this.routes[1].name='修改成员'
					}
					
				});
			},
			isValidPhone(phone) {
			    // 正则：以1开头，第二位是3-9，后面9位数字，共11位
			    const regex = /^1[3-9]\d{9}$/;
			    return regex.test(phone);
			},
			//提交订单
			submitForm(form){
				var data = this.formData;
				if(!data.name){
					uni.showToast({
						title:'请输入姓名',
						icon:'none'
					})
					return false;
				}
			
				if(this.isValidPhone(data.mobile) == false){
					uni.showToast({
						title:'请输入手机号码',
						icon:'none'
					})
					return false;
				}
				
				if(!data.role){
					uni.showToast({
						title:'请选择权限',
						icon:'none'
					})
					return false;
				}
				data.is_admin = true;
				if(data._id){
					var id = data._id;
					delete data._id;
				}
				if(!id){
					//查询当前手机号码是否已经存在，不存在才能添加
					db.collection('userinfo').where({mobile:data.mobile}).get({getOne:true}).then(userinfo=>{
						var userData = userinfo.result.data;
						if(!userData){
								db.collection('userinfo').add(data).then(res=>{
									uni.showToast({
										title:'添加成功',
										icon:'none'
									})
									
									setTimeout(() =>{
										uni.navigateTo({
											url:'/pages/index/index?page=admin-list'
										});
									},2000)
								});
							
						}else{
							uni.showToast({
								title:'相同手机号码的用户已存在',
								icon:'none'
							})
						}
					});
				}else{
					db.collection('userinfo').where({_id:id}).update(data).then(res=>{
						uni.showToast({
							title:'修改成功',
							icon:'none'
						})
						
						setTimeout(() =>{
							uni.navigateTo({
								url:'/pages/index/index?page=admin-list'
							});
						},2000)
					});
				}
				
				
			}
		}
	}
</script>

